import { Canvas } from "./canvas";

const container = document.getElementById("app");

// Playground 1:  Canvas
const canvasDiv = container!.appendChild(document.createElement("div"));
const canvas = new Canvas(canvasDiv, 400, 300);
canvas.drawPoint({ x: 50, y: 50 }, 10, { strokeStyle: "red" });
canvas.drawPoint({ x: 100, y: 50 }, 10, { fillStyle: "red" });
canvas.drawLine({ x: 50, y: 100 }, { x: 100, y: 100 }, { strokeStyle: "red" });
canvas.drawLine(
  { x: 75, y: 75 },
  { x: 75, y: 125 },
  { lineWidth: 10, strokeStyle: "blue" }
);
canvas.drawRect(
  { x: 250, y: 250 },
  { x: 300, y: 200 },
  { strokeStyle: "green" }
);
canvas.drawRect({ x: 200, y: 150 }, { x: 150, y: 100 }, { fillStyle: "green" });
canvas.drawArc({ x: 100, y: 250 }, 50, 0, Math.PI / 2, {
  strokeStyle: "green"
});
canvas.drawArc({ x: 100, y: 250 }, 50, Math.PI, Math.PI + Math.PI / 2, {
  fillStyle: "green"
});
canvas.drawArc({ x: 350, y: 50 }, 50, Math.PI / 6, Math.PI * 2 - Math.PI / 6, {
  fillStyle: "green"
});
canvas.drawText("Hello World!", { x: 300, y: 130 }, { font: "28px monospace" });
